package myJs.home

import com.softwaremill.quicklens._
import myJs.Utils.layer
import myJs.cps._
import myJs.myPkg.Swal.swal
import myJs.myPkg._
import myJs.myPkg.reactHookForm._
import myJs.tool.Tool
import myJs.tool.Tool._
import org.scalajs.dom.window
import japgolly.scalajs.react._
import myJs.myPkg.Hooks._
import japgolly.scalajs.react.vdom.all._
import myJs.Utils._
import scala.scalajs.js
import scala.scalajs.js.{Date, JSON}
import scala.scalajs.js.Dynamic.{global => g}

/** Created by yz on 3/11/2020
  */
object Cp {

  case class Props(idStr: String = "") {
    @inline def render: VdomElement = {
      Component(this)
    }
  }

  val Component = ScalaFnComponent[Props] { props =>

    val useForm = ReactHookForm.useForm(UseFormOptions(mode = "onChange"))
    val (symbol, setSymbol) = useState("")

    object FTool {

      def formSubmit = useForm.handleSubmit((data: js.Dictionary[js.Any]) => {
        println(JSON.stringify(data))
        val url = g.jsRoutes.controllers.ToolsController.searchBefore().url.toString
        window.location.href = s"${url}?symbol=${symbol}"
        ()
      })

      def symbolChange = (v: String) => {
        setSymbol(v)
      }

      def showExample(eg: String) = {
        FTool.symbolChange(eg)
      }

    }

    val egStr = "ABI3BP"

    FormProvider(
      control = useForm.control,
      formState = useForm.formState,
      setValue = useForm.setValue _
    )(
      form(
        onSubmit := FTool.formSubmit,
        className := "form-horizontal",
        div(
          className := "form-group",
          marginLeft := 0.px,
          marginRight := 0.px,
          div(
            className := "input-group",
            PureInputCp
              .Props(
                name = "symbol",
                value = symbol,
                placeHolder = "Keyword",
                onChange = FTool.symbolChange
              )
              .render,
            span(
              className := "input-group-btn",
              button(
                backgroundColor := "#3480A2",
                border := "1 px solid #DD8761",
                className := "btn ",
                "Search"
              )
            )
          ),
          label(
            paddingTop := 5.px,
            className := "control-label",
            s"e.g., ",
            a(onClick --> FTool.showExample(egStr), em(egStr))
          )
        )
      )
    )

  }

}
